<template>
  <div class="center">
    <div class="block">
      <el-date-picker
        v-model="month"
        popper-class="test"
        :clearable="true"
        value-format="yyyy-MM"
        type="month"
        placeholder="选择月份"
        style="margin-right: 10px"
      >
      </el-date-picker>
      <el-input
        v-model="sitename"
        :clearable="true"
        placeholder="请输入站点名称"
        style="width: 200px; margin-right: 10px"
      ></el-input>
      <el-input
        v-model="sitenum"
        placeholder="请输入站点编号"
        :clearable="true"
        style="width: 200px; margin-right: 10px"
      ></el-input>
      <el-button type="primary" @click="sub">查询</el-button>
      <el-button type="primary" @click="exportExcel">导出</el-button>
    </div>
    <div class="table">
      <dv-border-box-11 :color="['#11caff']" backgroundColor="transparent" title="月报表">
      <el-table
        :data="tableData"
        class="customer-table"
        height="71.5vh"
        :header-cell-class-name="headClass"
        :header-cell-style="headClass1"
        @select="selectL"
        @selection-change="handleSelectionChange"
        @current-change="chooseMcaterialChange"
        ref="Table"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="siteNo" label="站点编号" align="center">
        </el-table-column>
        <el-table-column prop="siteName" label="站点名称" align="center">
        </el-table-column>
        <el-table-column label="数据时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.month.substring(0, 10) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="warehouseAvg"
          label="电池仓月均温"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="warehouseMax"
          label="电池仓最高温"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="warehouseMin"
          label="电池仓最低温"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="cabinetAvg" label="充电柜月均温" align="center">
        </el-table-column>
        <el-table-column prop="cabinetMax" label="充电柜最高温" align="center">
        </el-table-column>
        <el-table-column prop="cabinetMin" label="充电柜最低温" align="center">
        </el-table-column>
        <el-table-column prop="lineAvg" label="线槽月均温" align="center">
        </el-table-column>
        <el-table-column prop="lineMax" label="线槽最高温" align="center">
        </el-table-column>
        <el-table-column prop="lineMin" label="线槽最低温" align="center">
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        @prev-click="prevclick"
        @next-click="nextclick"
        :current-page="currentPage"
        :page-size="pagesize"
        layout="total,prev, pager, next"
        :total="total"
      >
      </el-pagination>
      </dv-border-box-11>
    </div>
    <!-- 数据导出 -->
    <el-dialog
      class="export"
      title="数据导出"
      :inline="true"
      :visible.sync="dialogFormVisible"
      :append-to-body="true"
    >
      <el-form
        class="clearfix"
        :model="exportdata"
        label-position="left"
        label-width="100px"
      >
        <el-form-item label="月份" prop="accounts">
          <el-date-picker
            v-model="exportdata.month"
            value-format="yyyy-MM"
            type="month"
            placeholder="选择月份"
            style="margin-right: 10px"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="站点编号">
          <el-input
            v-model="exportdata.siteNo"
            placeholder="请输入站点编号"
            style="width: 200px; margin-right: 10px"
          ></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select
            v-model="type"
            placeholder="请选择导出格式"
            style="width: 200px; margin-right: 10px"
          >
            <el-option
              v-for="item in typelist"
              :label="item.value"
              :key="item.index"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="exportform(exportdata)"
            >导出</el-button
          >
          <el-button @click="exportout">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "monthlist",
  data() {
    return {
      currentPage: 1,
      total: 0,
      pagesize: 10,
      month: "",
      dialogFormVisible: false,
      sitename: "",
      sitenum: "",
      type: "",
      exportdata: {},
      typelist: [
        {
          value: "excel",
        },
        {
          value: "csv",
        },
      ],
      tableData: [],
    };
  },
  watch: {
    currentPage() {
      this.sub();
    },
  },
  methods: {
    headClass(row) {
      if (row.columnIndex === 0) {
        return "disabledCheck";
      }
    },
    headClass1() {
      return "background-color: transparent;color:#fff;font-weight:bold;";
    },
    selectL(selection, row) {
      if (selection.length > 0) {
        this.exportdata = row;
      }
    },
    handleSelectionChange(val) {
      if (val.length > 1) {
        this.$refs.Table.clearSelection();
        this.$refs.Table.toggleRowSelection(val.pop());
      }
    },
    //行点击事件
    chooseMcaterialChange(val) {
      this.$refs.Table.toggleRowSelection(val);
      this.exportdata = val;
    },
    //数据导出
    exportform(form) {
      let params = {
        siteNo: form.siteNo,
        time: form.month.substring(0, 7),
        format: this.type || "excel",
      };
      this.$request
        .post("/report/export", params)
        .then((res) => {
          let name = res.headers["content-disposition"]
            .split(";")[1]
            .split("fileName=")[1];
          const link = document.createElement("a");
          let blob;
          if (this.type == "excel") {
            blob = new Blob([res.data], {
              type:
                "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
            });
          }
          if (this.type == "csv") {
            blob = new Blob([res.data], {
              type: "text/csv;charset=UTF-8",
            });
          }
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          link.setAttribute("download", name);
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          URL.revokeObjectURL(link.href);
        })
        .catch((err) => {});
    },
    exportout() {
      this.dialogFormVisible = false;
      this.exportdata = {};
    },

    exportExcel() {
      if (JSON.stringify(this.exportdata) == "{}") {
        this.$message({
          message: "请选择一条要导出的数据",
          type: "warning",
        });
      } else {
        this.dialogFormVisible = true;
      }
    },
    //上一页
    prevclick() {
      this.currentPage--;
    },
    //下一页
    nextclick() {
      this.currentPage++;
    },
    //分页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    sub() {
      let params = {
        siteName: this.sitename,
        siteNo: this.sitenum,
        time: this.month,
        page: {
          pageNo: this.currentPage,
          pageSize: this.pagesize,
        },
      };
      this.$http
        .post("/report/list", params)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.tableData = res.data.b.records;
            this.total = res.data.b.total;
          }
        })
        .catch((err) => {});
    },
  },
  mounted() {
    this.sub();
  },
};
</script>
<style scoped>
.block {
  display: inline-block;
  margin-left: 20px;
  margin-top: 20px;
}
.table {
  margin: 0 20px;
  box-sizing: border-box;
  height:83vh;
}
.table .cell span {
  cursor: pointer;
  color: #007bff;
}
.el-pagination {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
.el-button {
  margin-right: 10px;
}
.block /deep/ .el-input__inner {
  color: white;
  background-color: transparent;
  border-color: rgba(19, 81, 156, 1) !important;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 150px;
}

.el-table /deep/ .disabledCheck .cell .el-checkbox__inner {
  display: none !important;
}
.el-table /deep/ .disabledCheck .cell:before {
  content: "";
  position: absolute;
  right: 11px;
}
</style>

<style>
.customer-table th {
  border: none;
}
.customer-table td,
.customer-table th.is-leaf {
  border: none;
}
.test{
  background-color: rgba(19, 81, 156, 1);
  color: #fff!important;
}
.test  .el-date-picker__header-label{
  color:#fff!important;
}
.test  .el-picker-panel__icon-btn{
  color:#fff!important;
}
.el-month-table td .cell{
  color:#fff!important;
}
</style>